<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <view class="content">
      <!-- <view class="titleList">
        <view class="list2 list">标题</view>
        <view class="list3 list">时间</view>
        <view class="list3 list">操作</view>
      </view>
      <view class="items" v-for="(item, index) in dataList" :key="index">
        <view class="list2 list">{{ item.content }}</view>
        <view class="list3 list">{{ formatTime(item.create_datetime) }}</view>
        <view class="list3 list">
          <up-text prefixIcon="trash" type="error" align="center" text="删除" size="22rpx" iconStyle="22rpx"
            @click="deletePost(item)"></up-text>
        </view>
      </view> -->
      <!-- <up-cell-group>
        <up-cell v-for="(item, index) in dataList" :key="index" :center="false" :arrow="false">
          <template #label>
            <view class="title">
              {{ item.content }}
            </view>
            <view class="time">
              <view>{{ formatTime(item.create_datetime) }}</view>
              <view>
                <up-text prefixIcon="trash" type="error" align="center" text="删除" size="22rpx" iconStyle="22rpx"
                  @click="deletePost(item)"></up-text>
              </view>
            </view>
          </template>
</up-cell>
</up-cell-group> -->
      <view class="informationList" v-for="(item, index) in dataList" :key="index">
        <view class="topTitleDate">
          <view class="profilePicture">
            <image :src="item.creator_avatar" mode="" style="width: 80rpx;height: 80rpx;"></image>
          </view>
          <view class="name">
            {{ item.creator_nickname }}
          </view>
          <view class="dateTime">
            {{ item.create_datetime }}
          </view>
        </view>
        <view class="comment">
          <up-read-more showHeight="70">
            <rich-text :nodes="item.content"></rich-text>
            <view class="imgComment">
              <view class="itemImage" v-for="(items, indexs) in item.images">
                <image :src="items" mode="aspectFit" style="width: 300rpx;height: 300rpx;"
                  @click="preview(item.images, indexs)"></image>
              </view>
            </view>
          </up-read-more>
        </view>
        <view class="bottomContent">
          <up-text prefixIcon="trash" type="error" text="删除" size="24rpx" iconStyle="24rpx"
                  @click="deletePost(item)"></up-text>
        </view>
      </view>
    </view>

    
    <up-modal :show="deleteShow" :content='content' :showCancelButton="true" @confirm="confirmDeletePost"
      @cancel="cancelDeletePost" @close="cancelDeletePost"></up-modal>

    <up-toast ref="uToastRef"></up-toast>
  </z-paging>
</template>

<script>
import dayjs from 'dayjs';
import { getMyPosts, deletePost } from '@/api/myposts'
export default {
  components: {},
  data() {
    return {
      dataList: [],
      curretData: null,
      deleteShow: false,
      content: '确认要删除当前帖子吗？'
    }
  },
  computed: {},
  created() {
  },
  methods: {
    queryList(pageNo, pageSize) {
      getMyPosts({
        page: pageNo,
        limit: 10,
      }).then((res) => {
        this.$refs.paging.complete(res.data.data);
      })
    },
    formatTime(time) {
      return dayjs(time).format('YYYY年MM月DD日');
    },
    deletePost(item) {
      this.curretData = item;
      this.deleteShow = true;
    },
    async confirmDeletePost() {
      try {
        const { id } = this.curretData;
        const res = await deletePost(id);
        let than = this;
        if (res.code === 2000) {
          than.$refs.paging.reload();
          this.deleteShow = false;
          this.$refs.uToastRef.show({
            type: 'success',
            message: res.msg,
          })
        } else {
          throw res.msg;
        }
      } catch (error) {
        console.log(error);
      }
    },
    cancelDeletePost() {
      this.deleteShow = false;
      this.curretData = null;
    },
    preview(urls, index) {
				uni.previewImage({
					urls: urls
				})
			}
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() { },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style lang="scss" scoped>
.content {
  padding: 25rpx;

  .titleList {
    display: flex;

    .list {
      text-align: center;
      font-size: 22rpx;
      font-weight: 600;
      width: calc(100%/3);
    }
  }

  .items {
    margin-top: 25rpx;
    display: flex;
    align-items: center;

    .icon {
      width: 22rpx;
      height: 22rpx;
      border-radius: 50%;
      border: 5rpx solid red;
      margin-right: 20rpx;
    }

    .list {
      text-align: center;
      font-size: 22rpx;
      width: calc(100%/3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.informationList {
				background-color: #fff;
				padding: 25rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.topTitleDate {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.profilePicture {
						border-radius: 50%;
						overflow: hidden;
					}

					.name {
						font-size: 32rpx;
						margin-left: 20rpx;
						flex: 1;
					}

					.dateTime {
						text-align: right;
						font-size: 24rpx;
						color: #9fa0a2;
						margin-right: 30rpx;
					}
				}

				.comment {
					margin-top: 20rpx;
					font-size: 32rpx;

					.imgComment {
						margin-top: 20rpx;
						display: flex;
						flex-wrap: wrap;

						.itemImage {
							width: calc((100%/2) - 40rpx);
							margin-bottom: 20rpx;
							overflow: hidden;

							image {
								object-fit: contain;
							}
						}

						.itemImage:nth-child(odd) {
							margin-right: 20rpx;
						}

					}
				}

				.bottomContent {
          width: 85rpx;
					margin-top: 20rpx;
					margin-left: auto;
					// display: flex;
					// align-items: center;

					.evaluate {
						width: 50%;
					}

					.rightEvaluate {
						width: 50%;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.like {
							display: flex;
							margin-right: 40rpx;
							align-items: center;

							image {
								margin-right: 10rpx;
							}

							.value {
								font-size: 25rpx;
							}
						}
					}
				}
			}

.title {
  font-size: 30rpx;
  // font-weight: bold;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 23px;
  // width: 80%;
}

.time {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #989898;
  text-align: left;
  margin-top: 5px;
}
</style>